<template>
  <el-tabs value="hot" type="card" @tab-click="handleClick">
    <el-tab-pane label="热门回答" name="hot">
      <list name="hot" :listData="listData" :page="page"
      @fetch-data="fetchData"
      >
      </list>
    </el-tab-pane>
    <el-tab-pane label="最新问答" name="new">
      <list name="new" :listData="listData" :page="page"
            @fetch-data="fetchData">
      </list>
    </el-tab-pane>
    <el-tab-pane label="等待回答" name="wait">
      <list name="wait" :listData="listData" :page="page"
            @fetch-data="fetchData">
      </list>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  import list from '@/components/question/List.vue'


  export default {
    //   validate({params}){
    //     const arr = ['wait','hot','new'];
    //     return arr.indexOf(params.question) !=-1
    //   },
    // asyncData({params}){
    //     console.log('查询问题列表',params.question)
    // }
    components: {
      list
    },
    methods: {
      handleClick(tab) {
        console.log(tab.paneName)
        this.fetchData(tab.paneName,1)
      },
      //获取分页数据
      async fetchData(pageName, current) {
        //分页查询数据
        //let 相比const是变量 它可以重新赋值 const是常亮
        let response=null;
        this.page.pageNum = current;
        switch (pageName) {
          case 'hot':
            response = await this.$queryHotQuerstionList(this.page);
            break;
          case 'new':
            response = await this.$queryNewQuerstionList(this.page);
            break;
          case 'wait':
            response = await this.$queryWaitQuerstionList(this.page);
            break;
            default:
              break;
        }
        if(response&&response.code==200){
          //更新总记录数
          this.page.total = response.data.total;
          this.listData = response.data.rows;
        }

      }
    },
    async asyncData({app}) {
      const page = {
        total: 0,
        current: 1,
        size: 10
      }
      const {data} = await app.$queryHotQuerstionList(page);
      console.log(data)
      //赋值
      page.total = data.total
      return {listData: data.rows, page}
    }
  }
</script>

<style scoped>

</style>
